<template>
  <div class="content" v-loading="isLoading" >
    <p><strong>解释：</strong>开启后，在导入名单模板中，【组别】列中出现该组</p>
    <div v-for="item in groupImportableList" :key="item.groupId" class="row">
      <label class="groupName" for="">{{ item.groupName }}</label>
      <el-switch
        v-model="item.importable"
        @change="importableChangeHandler(item)"
      >
      </el-switch>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      isLoading: false,
      groupImportableList: [
        {
          groupId: 123,
          groupName: "测试1",
          importable: true,
        },
        {
          groupId: 124,
          groupName: "测试2",
          importable: false,
        },
      ],
    };
  },
  created() {
    this.getGroupImportableList();
  },
  mounted() {},
  methods: {
    /**
     * 获取所有小组是否可导入的配置列表
     */
    async getGroupImportableList() {
      const res = await this.$axios.get(`${this.HOST}/config/api/importableGroup`);
      // console.log("g",res);
      if (res.data.meta.code == 200) {
        this.groupImportableList = res.data.data.groups;
        console.log(
          "获取是否可直接导入名单组别信息成功！",
          this.groupImportableList
        );
      }
    },
    /**
     * 更新小组的是否可直接导入属性
     */
    async importableChangeHandler(group) {
      this.isLoading = true;
      console.log("groupInfo", group);
      let flag = group.importable ? "1" : "0";
      const res = await this.$axios.get(
        `${this.HOST}/config/api/changeImportableGroup/` +
          group.groupId +
          `/` +
          flag
      );
      if (res.data.meta.code == 200) {
        this.$message.success("更新成功！");
        this.getGroupImportableList();
      }
      this.isLoading = false;
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .row {
    margin-bottom: 10px;

    .groupName {
      display: inline-block;
      width: 100px;
      text-align: end;
      margin-right: 5px;
    }
  }
}
</style>